<template>
  <div class="comment-list">

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <CommentListItem v-for="v of list" :key="v.com_id" :comment="v" />
    </van-list>

  </div>
</template>

<script>
import CommentListItem from '../comment-list-item/index.vue'
import { mutations as commentMutations } from '../../../../store/modules/comment'
export default {
  name: 'CommentList',
  components: { CommentListItem },
  props: {
    // 这个 type 是属性名字
    // 可选值：a-文章，展示的是文章的评论列表，c-评论，展示的评论的回复列表
    type: {
      type: String,
      default: 'a',
      validator (value) {
        // 如果返回 true，校验通过
        // 如果返回 false，校验不通过
        return ['a', 'c'].includes(value)
      }
    },
    // 如果要展示文章的评论列表，那么就是文章的id，如果要展示评论的回复列表，那么就是评论id
    source: {
      type: [String, Number],
      required: true
    }
  },
  data () {
    return {
      error: false,
      offset: null,
      // list: [],
      loading: false,
      finished: false
    }
  },
  computed: {
    // 根据当前的类型，从 vuex 中拿列表数据
    list () {
      return this.type === 'a'
        ? this.$store.state.comment.artileCommentList
        : this.$store.state.comment.commentReplyList
    }
  },
  methods: {
    async onLoad () {
      let res
      try {
        // 获取评论列表
        // type: a-获取文章的评论列表，c-评论的回复列表
        // source: 源id，文章id或评论id
        // offset: 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
        res = await this.apis.comment.getComments({ type: this.type, source: this.source, offset: this.offset })
      } catch (err) {
        this.error = true
        return
      } finally {
        this.loading = false
      }
      const list = res.data.data.results
      this.$store.commit(commentMutations.addListItems.nsname, [list, this.type, 'push'])
      // 如果请求回来的列表为空，说明数据加载完了
      if (list.length === 0) {
        this.finished = true
      }
      // 否则说明数据还没加载完，需要更新加载下一页数据是的偏移量 this.offset，就是当前最后一个评论id
      else {
        this.offset = list[list.length - 1].com_id
      }
    }
  }
}
</script>

<style>

</style>
